<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-06-30 15:24:21
 * @LastEditTime: 2022-03-23 16:04:08
-->
<template>
  <div>
    <Collapse v-model="panelChoose">
      <Panel :name="item.plateId.toString()" v-for="item in panelList" :key="item.plateId">
        <p class="ell" :title="item.plateName">{{item.plateName}}</p>
        <div slot="content">
          <div class="proBox"
            :class="[{'checked':checkProduct.productId==productItem.productId}]"
            v-for="productItem in item.productDTOS" :key="productItem.productId"
            @click="filterProduct(productItem)">
            <div class="pro">
              <p class="p1 ell" :title="productItem.productName">{{productItem.productName}}
              </p>
              <p class="p2">
                <span>产品类型：{{$formatter.switchName('productType',productItem.productType) || '-'}}</span><span>楼栋数：{{productItem.buildingCount}}</span>
              </p>
            </div>
          </div>
        </div>
      </Panel>
    </Collapse>
    <p v-show="!panelList.length" class="text-center" style="line-height:40px">暂无数据</p>
  </div>
</template>
<script>
  import roomMgr from '@/biz/modeling/room/room'
  export default {
    name: 'panel',
    data() {
      return {
        panelChoose: '',
        panelList: [],
        checkProduct: {},
      }
    },
    components: {},
    mounted() {
      this.getPlateTreeData()
    },
    methods: {
      // 获取案场下产品信息
      getPlateTreeData(preCheck = {}) {
        let params = {
          housesId: this.$dt.buildInfo().housesId,
        }
        let plateId = '',
          productId = ''
        if (preCheck.productId && preCheck.plateId) {
          plateId = preCheck.plateId
          productId = preCheck.productId
        } else if (this.$route.params.productId && this.$route.params.plateId) {
          plateId = this.$route.params.plateId
          productId = this.$route.params.productId
        }
        roomMgr
          .getPlateList(params)
          .then((res) => {
            this.panelList = res
            if (res.length) {
              if (productId && plateId) {
                this.panelChoose = plateId.toString()
                res.forEach((ele) => {
                  if (ele.plateId == plateId) {
                    ele.productDTOS.forEach((elePro) => {
                      if (elePro.productId == productId) {
                        this.$emit('onSearch', elePro)
                        this.checkProduct = elePro
                      }
                    })
                  }
                })
              } else {
                try {
                  res.forEach((item) => {
                    if (item.productDTOS.length) {
                      this.panelChoose = item.plateId.toString()
                      // 默认选中第一个产品  如果从产品管理页面过来
                      this.$emit('onSearch', item.productDTOS[0])
                      this.checkProduct = item.productDTOS[0]
                      throw Error()
                    }
                  })
                } catch (e) {}
              }
            } else {
              this.$emit('onSearch', null)
            }
          })
          .catch((res) => this.$Message.error(res))
      },
      // 过滤产品下房源
      filterProduct(item) {
        this.$emit('onSearch', item)
        this.checkProduct = item
      },
    },
    created() {},
    beforeMount() {},
    props: {},
  }
</script>
<style lang='scss' scoped>
  .proBox {
    border-bottom: 1px solid #dcdee2;
    padding: 5px 0;
    cursor: pointer;

    .pro {
      padding: 5px 10px;

      p.p1 {
        margin-bottom: 10px;
      }

      p.p2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }

  ::v-deep .ivu-collapse {
    width: 300px;
  }

  ::v-deep .ivu-collapse-header {
    display: flex;
    align-items: center;
  }

  .checked {
    background: skyblue;
    color: #fff;
  }
</style>